<template>
  <view>
    <my-search @click="gotoSearch"></my-search>
    <view class="scroll-view-container">
      <!-- 左侧的滚动视图区域 -->
      <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
        <block v-for="(item, i) in cateList" :key="i">
          <view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChanged(i)">
            {{item.cat_name}}
          </view>
        </block>
      </scroll-view>
      <scroll-view scroll-y="true" :style="{height: wh + 'px'}">
        <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2" @click="gotoGoodsList(item2)">
          <view class="cate-lv2-title">{{item2.cat_name}}</view>
        </view>
      </scroll-view>

    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        wh: 0,
        active: 0,
        cateList: [{
            "cat_name": "精神心理",
            "children": [{
                "i2": "1",
                "cat_name": "焦虑障碍"
              },
              {
                "i2": "2",
                "cat_name": "抑郁症"
              }, {
                "i2": "3",
                "cat_name": "精神分裂症"
              }, {
                "i2": "4",
                "cat_name": "双相情感障碍"
              }, {
                "i2": "5",
                "cat_name": "强迫症"
              }, {
                "i2": "6",
                "cat_name": "广泛性焦虑障碍"
              }, {
                "i2": "7",
                "cat_name": "失眠障碍"
              }, {
                "i2": "8",
                "cat_name": "自闭症"
              }, {
                "i2": "9",
                "cat_name": "注意缺陷多动障碍（多动症）"
              }, {
                "i2": "10",
                "cat_name": "自恋型人格障碍"
              }, {
                "i2": "11",
                "cat_name": "恐惧症"
              }, {
                "i2": "12",
                "cat_name": "社交焦虑障碍"
              }, {
                "i2": "13",
                "cat_name": "产后抑郁症"
              }, {
                "i2": "14",
                "cat_name": "妄想性障碍"
              }, {
                "i2": "15",
                "cat_name": "分离焦虑障碍"
              }, {
                "i2": "16",
                "cat_name": "品行障碍"
              }, {
                "i2": "17",
                "cat_name": "神经性厌食"
              }, {
                "i2": "18",
                "cat_name": "异食癖"
              }, {
                "i2": "19",
                "cat_name": "发作性睡病"
              }, {
                "i2": "20",
                "cat_name": "梦游症"
              }
            ]
          },
          {
            "cat_name": "神经疾病",
            "children": [{
                "i2": "21",
                "cat_name": "原发性震颤"
              },
              {
                "i2": "22",
                "cat_name": "阿尔兹海默症"
              }, {
                "i2": "23",
                "cat_name": "亨廷顿舞蹈病"
              }, {
                "i2": "24",
                "cat_name": "血管性痴呆"
              }, {
                "i2": "25",
                "cat_name": "帕金森病"
              }, {
                "i2": "26",
                "cat_name": "脑梗死"
              }, {
                "i2": "27",
                "cat_name": "偏头痛"
              }, {
                "i2": "28",
                "cat_name": "紧张型头痛"
              }, {
                "i2": "29",
                "cat_name": "癫痫"
              }, {
                "i2": "30",
                "cat_name": "头痛"
              }, {
                "i2": "31",
                "cat_name": "三叉神经痛"
              }, {
                "i2": "32",
                "cat_name": "特发性面神经麻痹（周围性面瘫）"
              }, {
                "i2": "33",
                "cat_name": "头晕"
              }, {
                "i2": "34",
                "cat_name": "神经衰弱"
              }, {
                "i2": "35",
                "cat_name": "梅尼埃病"
              }, {
                "i2": "36",
                "cat_name": "病毒性脑膜炎"
              }, {
                "i2": "37",
                "cat_name": "脑震荡"
              }
            ]
          },
          {
            "cat_name": "情感婚姻",
            "children": [{
                "i2": "38",
                "cat_name": "家庭关系"
              },
              {
                "i2": "39",
                "cat_name": "情感危机"
              }, {
                "i2": "40",
                "cat_name": "恋爱困扰"
              }, {
                "i2": "41",
                "cat_name": "恐婚"
              }, {
                "i2": "42",
                "cat_name": "情感纠葛"
              }, {
                "i2": "43",
                "cat_name": "婚姻危机"
              }, {
                "i2": "44",
                "cat_name": "性心理"
              }
            ]
          },
          {
            "cat_name": "情绪问题",
            "children": [{
                "i2": "45",
                "cat_name": "情绪化"
              },
              {
                "i2": "46",
                "cat_name": "易怒"
              }, {
                "i2": "47",
                "cat_name": "心情压抑"
              }, {
                "i2": "48",
                "cat_name": "心理恐惧"
              }, {
                "i2": "49",
                "cat_name": "自卑"
              }
            ]
          },

          {
            "cat_name": "亲子问题",
            "children": [{
                "i2": "50",
                "cat_name": "单亲儿童心理问题"
              },
              {
                "i2": "51",
                "cat_name": "亲子关系"
              }, {
                "i2": "52",
                "cat_name": "叛逆心理"
              }, {
                "i2": "53",
                "cat_name": "考试焦虑"
              }, {
                "i2": "54",
                "cat_name": "网瘾、赌瘾"
              }, {
                "i2": "55",
                "cat_name": "学习障碍"
              }, {
                "i2": "56",
                "cat_name": "发育迟滞"
              }, {
                "i2": "57",
                "cat_name": "抽动障碍"
              }, {
                "i2": "58",
                "cat_name": "专注力差"
              }, {
                "i2": "59",
                "cat_name": "学习困难"
              }, {
                "i2": "60",
                "cat_name": "社会适应不良"
              }, {
                "i2": "61",
                "cat_name": "青春期心理"
              }, {
                "i2": "62",
                "cat_name": "网瘾"
              }
            ]
          },

          {
            "cat_name": "职场问题"
          },
          {
            "cat_name": "睡眠问题"
          },
          {
            "cat_name": "压力问题"
          },
          {
            "cat_name": "成长问题"
          },
          {
            "cat_name": "咨询疗法"
          },
        ],
        cateLevel2: []
      };
    },

    onLoad() {
      const sysInfo = uni.getSystemInfoSync()
      // 为 wh 窗口可用高度动态赋值
      this.wh = sysInfo.windowHeight - 50
      this.getCateList()
    },
    methods: {
      // 选中项改变的事件处理函数
      activeChanged(i) {
        this.active = i
        // this.cateLevel2 = this.cateList[i].children
      },
      getCateList() {

        this.cateLevel2 = this.cateList[0].children
        console.log(cateLevel2)

      },
      activeChanged(i) {
        this.active = i
        // 为二级分类列表重新赋值
        this.cateLevel2 = this.cateList[i].children
      },
      gotoGoodsList(item2) {
        uni.navigateTo({
          url: '/subpkg/disorders_detail/disorders_detail?i2=' + item2.i2
        })
      },
      gotoSearch() {
        uni.navigateTo({
          url: '/subpkg/search/search'
        })
      }

    }
  }
</script>

<style lang="scss">
  .scroll-view-container {
    display: flex;

    .left-scroll-view {
      width: 120px;

      .left-scroll-view-item {
        line-height: 60px;
        background-color: #f7f7f7;
        text-align: center;
        font-size: 12px;

        // 激活项的样式
        &.active {
          background-color: #ffffff;
          position: relative;

          // 渲染激活项左侧的红色指示边线
          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #c00000;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }

    .cate-lv2-title {
      background-color: white;
      line-height: 30px;
      font-size: 12px;
      text-align: center;
      padding: 15px 0;
    }
  }

  .cate-lv3-list {
    display: flex;
    flex-wrap: wrap;

    .cate-lv3-item {
      width: 33.33%;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;

      image {
        width: 60px;
        height: 60px;
      }

      text {
        font-size: 12px;
      }
    }
  }
</style>